<template>
  <div class="container-page-article">
    <div class="item-tab-nav">
      <div class="tab-title">合辑</div>
      <div
        v-for="(temp,index) in tabs"
        :key="index"
        :class="['tab-item', index===nowCheck&&'active']"
        @click="switchTab(index,temp)"
      >
        {{ temp.name }} ({{ temp.count }})
      </div>
    </div>
    <div class="group-archive-list">
      <div
        v-if="tabLoading"
        class="item-tab-loading"
      ><i class="el-icon-loading" />&nbsp;&nbsp;加载中...</div>
      <template v-else>
        <template v-if="isTabShow">
          <itemListArchive
            :list="nowShowTab.list"
            @delete="archiveDeleteHandler"
            @animation="animationHandler"
          />
          <el-pagination
            class="item-pagination"
            :disabled="animationDefend"
            prev-text="上一页"
            next-text="下一页"
            layout="total, prev, pager, next"
            :current-page="nowShowTab.page"
            :page-size="nowShowTab.pageSize"
            :total="nowShowTab.count"
            :hide-on-single-page="true"
            @current-change="currentChangeHandler"
          />
        </template>
        <itemNoData
          v-else
          :text="nowShowTab.name | nodataText"
        />
      </template>
    </div>
  </div>
</template>

<script>
// api
import { getArchiveList } from '@/api/mivawork/audio.js';
// item
import itemListArchive from '@/views/miva-member/upload-manager/components/article-audio.vue';
import itemNoData from '@/views/miva-member/upload-manager/components/nodata.vue';

export default {
  filters: {
    nodataText(str) {
      if (str === '全部合辑') {
        return `没有合辑`;
      }
      return `没有${str}的合辑`;
    }
  },
  components: {
    itemListArchive,
    itemNoData
  },
  data() {
    return {
      animationDefend: false,
      nowCheck: null,
      tabLoading: true,
      // nowPage: 1,
      tabs: [
        {
          name: '全部合辑',
          state: 0,
          count: 0,
          list: null,
          load: false,
          pageSize: 5,
          page: 1
        },
        {
          name: '审核中',
          state: 1,
          count: 0,
          list: null,
          load: false,
          pageSize: 5,
          page: 1
        },
        {
          name: '已通过',
          state: 2,
          count: 0,
          list: null,
          load: false,
          pageSize: 5,
          page: 1
        },
        {
          name: '未通过',
          state: 3,
          count: 0,
          list: null,
          load: false,
          pageSize: 5,
          page: 1
        }
      ]
    };
  },
  computed: {
    nowShowTab() {
      return this.tabs[this.nowCheck];
    },
    isTabShow() {
      const tab = this.nowShowTab;
      return (
        tab &&
        tab.list &&
        ((typeof tab.list).toLocaleLowerCase() === 'object' || 'array') &&
        tab.list.length !== 0
      );
    }
  },
  created() {
    this.nowCheck = Number(this.$route.query.tab) || 0;
  },
  async mounted() {
    this.tabLoading = true;
    await this.getArchiveListByState(this.nowCheck);
    this.tabLoading = false;
  },
  methods: {
    async getArchiveListByState(state = 0) {
      const params = {
        state,
        page: this.tabs[state].page,
        size: this.tabs[state].pageSize
      };
      if (state === 0) {
        delete params.state;
      }
      const res = await getArchiveList(params);
      console.log(res);
      this.tabs[state].load = true;
      this.tabs[state].list = res.data.archives.map(v => {
        this.$set(v, 'isDelete', false);
        return v;
      });
      console.log(this.tabs[state].list);
      this.resetCount(res.data);
    },
    async resetCount(data) {
      this.tabs[0].count = data.count;
      this.tabs[1].count = data.examineDoingCount;
      this.tabs[2].count = data.examineCompleteCount;
      this.tabs[3].count = data.examineFailCount;
    },
    async switchTab(index, temp) {
      if (this.animationDefend) {
        // 动画效果保护
        return;
      }
      this.setQuery(index);
      this.nowCheck = index;
      // this.nowPage = temp.page;
      if (temp.load) {
        // 使用内存数据
        return;
      }
      this.tabLoading = true;
      await this.getArchiveListByState(index);
      this.tabLoading = false;
    },
    async currentChangeHandler(page) {
      const nowTab = this.tabs[this.nowCheck];
      // this.nowPage = page;
      nowTab.page = page;
      nowTab.load = false;
      await this.getArchiveListByState(nowTab.state);
    },
    async setQuery(param) {
      this.$router.push({ query: { tab: param }});
    },
    async archiveDeleteHandler() {
      this.tabs[this.nowCheck].load = false;
      await this.getArchiveListByState(this.nowCheck);
    },
    async animationHandler(param) {
      this.animationDefend = param;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.container-page-article {
  width: 740px;
  min-height: 100%;
  margin: auto;
  position: relative;
  .item-tab-nav {
    display: flex;
    align-items: flex-end;
    margin-bottom: 20px;
    .tab-title {
      font-size: 24px;
    }
    .tab-item {
      margin: 0 20px;
      padding-bottom: 5px;
      font-size: 12px;
      position: relative;
      border-bottom: 1px solid transparent;
      &.active {
        border-color: $menuActiveText;
        color: $menuActiveText;
        &::after {
          content: "";
          display: block;
          width: 0;
          height: 0;
          position: absolute;
          bottom: -1px;
          left: 50%;
          transform: translateX(-50%);
          border: 3px solid;
          border-color: transparent transparent $menuActiveText transparent;
        }
      }
    }
  }
  .group-archive-list {
    min-height: 800px;
    position: relative;
    padding-bottom: 50px;
    .item-tab-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .item-pagination {
      width: 100%;
      position: absolute;
      bottom: 0;
    }
  }
}
</style>
